<template>
	<view class="item" :class="statusClass">
		<view class="title">
			<view class="left">
				<icon class="ic-shebei iconfont bs-shebei" type=""></icon>
				<text>{{ item.name }}</text>
			</view>
			<view v-if="isShowStatus">
				<view class="right dui" v-if="item.status=='1'">
					<text>可预约</text>
					<icon class="ic-dui iconfont bs-dui"></icon>
				</view>
				<view class="right cuo" v-if="item.status=='2'">
					<text>已约满</text>
					<icon class="ic-cuo iconfont bs-cuo"></icon>
				</view>
				<view class="right zanting" v-if="item.status=='3'">
					<text>未开放</text>
					<icon class="ic-cuo iconfont bs-cuo"></icon>
				</view>
				<view class="right guzhang" v-if="item.status=='4'">
					<text>维护中</text>
					<icon class="ic-guzhang iconfont bs-guzhang"></icon>
				</view>
				<view class="right jianshe" v-if="item.status=='5'">
					<text>建设中</text>
					<icon class="ic-jianshe iconfont bs-jianshe"></icon>
				</view>
			</view>
		</view>
		<!-- <view class="time-root">
			<view class="time-item" :class="{'active': !isTimeSelected(1)}">
				<text>8-10</text>
			</view>
			<view class="time-item" :class="{'active': !isTimeSelected(2)}">
				<text>10-12</text>
			</view>
			<view class="time-item" :class="{'active': !isTimeSelected(3)}">
				<text>14-16</text>
			</view>
			<view class="time-item" :class="{'active': !isTimeSelected(4)}">
				<text>16-18</text>
			</view>
		</view> -->
		<view class="bottom">
			<view class="address">
				<text>{{ item.detail }}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineProps, computed } from 'vue'

	const props = defineProps({
		item: {
			type: Object,
			default: {},
		},
		isShowStatus: {
			type: Boolean,
			default: false,
		}
	})

	// 计算动态样式，根据状态变化
	const statusClass = computed(() => {
		switch (props.item.stauts) {
			case '可预约':
				return 'dui'
			case '已被约':
				return 'cuo'
			case '暂停开放':
				return 'zanting'
			case '建设中':
				return 'jianshe'
			case '故障中':
				return 'guzhang'
			default:
				return ''
		}
	})

	// 判断是否选择了某个时间段
	const isTimeSelected = (timeSlot : number) => {
		if (props.item.stauts != "可预约") {
			return false
		}
		else {
			return !(props.item.yysd && props.item.yysd.toString().includes(timeSlot.toString()));
		}
		// 判断 item.yysd 是否包含该时间段对应的数字
		// return props.item.yysd && props.item.yysd.toString().includes(timeSlot.toString());
	}
</script>
<style lang="scss" scoped>
	@import "/static/css/iconfont.css";
	
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.item {
		padding: 15px;
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 0.95);
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
		animation: fadeIn 0.5s ease-out;
		overflow: hidden;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.item.dui {
		border-left: 10px solid #4cd964;
	}

	.item.cuo {
		border-left: 10px solid #F17662;
	}

	.item.zanting {
		border-left: 10px solid #9BA0AC;
	}

	.item.jianshe {
		border-left: 10px solid #f69c00;
	}

	.item.guzhang {
		border-left: 10px solid #F0B500;
	}

	.title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #2d2d2d;
		margin-bottom: 10px;

		.dui {
			color: #4cd964;
			background-color: rgba(76, 217, 100, 0.1);
			padding: 4px 8px;
			border-radius: 4px;
		}

		.cuo {
			color: #F17662;
			background-color: rgba(241, 118, 98, 0.1);
			padding: 4px 8px;
			border-radius: 4px;
		}

		.jianshe {
			color: #f69c00;
			background-color: rgba(246, 156, 0, 0.1);
			padding: 4px 8px;
			border-radius: 4px;
		}

		.zanting {
			color: #9BA0AC;
			background-color: rgba(155, 160, 172, 0.1);
			padding: 4px 8px;
			border-radius: 4px;
		}

		.guzhang {
			color: #F0B500;
			background-color: rgba(240, 181, 0, 0.1);
			padding: 4px 8px;
			border-radius: 4px;
		}
	}

	.left {
		display: flex;
		align-items: center;
		
		.ic-shebei {
			color: #2196f3;
			font-size: 22px;
		}

		text {
			font-size: 16px;
			margin-left: 8px;
			font-weight: bold;
			color: #333;
		}
	}

	.right {
		font-size: 12px;
		font-weight: bold;
		display: flex;
		align-items: center;

		.ic-dui, .ic-cuo, .ic-jianshe, .ic-guzhang {
			font-size: 14px;
			margin-left: 4px;
		}

		text {
			margin-right: 3px;
		}
	}

	.bottom {
		margin-top: 10px;
		color: #666;
		
		.address {
			font-size: 14px;
			line-height: 1.5;
		}
	}
</style>